<!--
 * @Descripttion: 
 * @version: 
 * @Author: ada.wu
 * @Date: 2024-03-12 10:34:15
 * @LastEditors: ada.wu
 * @LastEditTime: 2024-04-10 19:41:11
   1  单选题 是非题  2  判断题  3  多选题 4  问答题 开放题 5  量表题  新加的
-->
<template>
  <div>
    <van-cell v-for="(item,index) in topicModuleList" :key="index">
      <template #title>
        <div class="p-tb-xs">
          <font v-if="item.isNecessary=='1'" color="#FF3138">*</font>
          {{(index+1)}}.{{item.modulesName}}
          <font color="#979797" v-if="[CHOICE_TYPE.CHOICE].includes(item.choiceType)">【多选】</font>
        </div>
      </template>
      <template #label>
        <!-- 填空 -->
        <div v-if="[CHOICE_TYPE.FILL].includes(item.choiceType)">
          <van-field :disabled="disabled" v-model="item.answerContent" placeholder="请回答" type="textarea" rows="3" autosize />
        </div>
        <!-- 单选 -->
        <div v-else-if="[CHOICE_TYPE.RADIO].includes(item.choiceType)">
          <ExamineRadio :examSubjectDto="item" :disabled="disabled"></ExamineRadio>
        </div>
        <!-- 多选 -->
        <div v-else-if="[CHOICE_TYPE.CHOICE].includes(item.choiceType)">
          <ExamineCheckbox :examSubjectDto="item" :disabled="disabled"></ExamineCheckbox>
        </div>
        <!-- 评分 -->
        <div class="examineinfo-rater" v-else-if="[CHOICE_TYPE.SCORE].includes(item.choiceType)">
          <div class="rater-title">
            <div>{{item.moduleOptionList[0].remark}}</div>
            <div>{{item.moduleOptionList[item.moduleOptionList.length-1].remark}}</div>
          </div>
          <van-rate :readonly="disabled" :size="30" v-model="item.rateContent" :count="item.moduleOptionList.length" color="#ffd21e" void-icon="star" void-color="#eee" />
        </div>

      </template>
    </van-cell>
  </div>
</template>

<script lang="ts">
import { defineComponent, toRefs, reactive } from "vue";
import ExamConfig from "/@/hooks/examConfig";
import NPS from "./NPS.vue";
import ExamineRadio from "./ExamineRadio.vue";
import ExamineCheckbox from "./ExamineCheckbox.vue";

const CHOICE_TYPE = {
  RADIO: "0", //单选
  CHOICE: "1", //多选
  FILL: "2", //填空
  SCORE: "3", //评分
};
export default defineComponent({
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    currentPage: {
      type: Number,
      default: 1,
    },
    examDto: {
      type: Object,
      default: () => ({}),
    },
    topicModuleList: {
      type: Array,
      default: () => [],
    } as any,
  },
  components: {
    NPS,
    ExamineRadio,
    ExamineCheckbox,
  },
  setup(props, { emit }) {
    const state = reactive({
      CHOICE_TYPE,
    });
    function handCheck(_index: any, item: any, data: any, idx: any) {
      if (_index + 1 <= props.topicModuleList.length) {
        if (item.choiceType == CHOICE_TYPE.RADIO) {
          //单选
          for (let j in props.topicModuleList[_index].moduleOptionList) {
            props.topicModuleList[_index].moduleOptionList[j].isSelected =
              false;
          }
          props.topicModuleList[_index].moduleOptionList[idx].isSelected = true;
          // //执行下一步
          // if (this.showType) {
          //   this.doNext(_index);
          // }
        } else if (item.choiceType == CHOICE_TYPE.CHOICE) {
          //多选
          props.topicModuleList[_index].moduleOptionList[idx].isSelected =
            !props.topicModuleList[_index].moduleOptionList[idx].isSelected;
        }
      } else {
        console.info("end");
      }
    }
    return {
      ...toRefs(state),
      ...toRefs(props),
      ...ExamConfig(),
      handCheck,
    };
  },
});
</script>

<style lang="scss" scoped>
::v-deep(.van-rate) {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  padding: 0 10px 0 10px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
::v-deep(.van-cell__title) {
  font-weight: 500;
  font-size: 16px;
  color: #262626;
}
::v-deep(.van-cell__label) {
  font-weight: 400;
  font-size: 16px;
  color: #555555;
  padding-bottom: 20px;
}
::v-deep(.van-cell:after) {
  border: none;
}
::v-deep(.van-field) {
  border-radius: 5px;
  border: 1px solid $bs-color;
}
.rater-title {
  color: #555555;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px 10px 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #ffd000;
}
</style>

